<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			国家：{{country}}
			<country-select :options='options' v-model:country='country'></country-select>
		</div>
		
		<template id="country-module">
			<div>
				选择国家:
				<input type='text' :value='country'/>
				<select :value='country' @change='$emit("update:country", $event.target.value)'>
					<option disabled>请选择</option>
					<option v-for='option in options' :value='option'>{{option}}</option>
				</select>
			</div>		
		</template>
		
		<script>
			var app = Vue.createApp({
				data(){
					return {
						options: ['中国','美国','日本','韩国'],
						country: '',
					}
				}
			})
			
			app.component('country-select',{
				props: ['options','country'],
				emits: ['update:country'],
				template: '#country-module'
			})
			
			var vm = app.mount("#app")
		</script>
	</body>
</html>
